import React, { useState } from 'react';
import TodoItem from './TodoItem';

function SimpleTodo() {
  // 使用 useState 管理 Todo 列表和输入
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');
  const [filter, setFilter] = useState('all'); // 'all', 'active', 'completed'
  
  // 处理输入变化
  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };
  
  // 添加新的 Todo
  const addTodo = (e) => {
    e.preventDefault();
    if (inputValue.trim() !== '') {
      const newTodo = {
        id: Date.now(),
        text: inputValue,
        completed: false
      };
      setTodos([...todos, newTodo]);
      setInputValue('');
    }
  };
  
  // 切换 Todo 的完成状态
  const toggleTodo = (id) => {
    setTodos(
      todos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };
  
  // 删除 Todo
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };
  
  // 根据过滤条件获取 Todo 列表
  const filteredTodos = todos.filter(todo => {
    if (filter === 'active') return !todo.completed;
    if (filter === 'completed') return todo.completed;
    return true; // 'all'
  });
  
  // 计算统计信息
  const totalTodos = todos.length;
  const completedTodos = todos.filter(todo => todo.completed).length;
  const activeTodos = totalTodos - completedTodos;
  
  return (
    <div className="simple-todo">
      <form className="todo-form" onSubmit={addTodo}>
        <input
          type="text"
          className="todo-input"
          value={inputValue}
          onChange={handleInputChange}
          placeholder="添加新的待办事项..."
        />
        <button type="submit" className="todo-add-button">添加</button>
      </form>
      
      <div className="todo-filters">
        <button 
          className={`todo-filter ${filter === 'all' ? 'active' : ''}`}
          onClick={() => setFilter('all')}
        >
          全部
        </button>
        <button 
          className={`todo-filter ${filter === 'active' ? 'active' : ''}`}
          onClick={() => setFilter('active')}
        >
          未完成
        </button>
        <button 
          className={`todo-filter ${filter === 'completed' ? 'active' : ''}`}
          onClick={() => setFilter('completed')}
        >
          已完成
        </button>
      </div>
      
      {filteredTodos.length === 0 ? (
        <p className="empty-message">暂无待办事项</p>
      ) : (
        <ul className="todo-list">
          {filteredTodos.map(todo => (
            <TodoItem
              key={todo.id}
              todo={todo}
              toggleTodo={toggleTodo}
              deleteTodo={deleteTodo}
            />
          ))}
        </ul>
      )}
      
      <div className="todo-stats">
        <p>总计: {totalTodos}</p>
        <p>已完成: {completedTodos}</p>
        <p>未完成: {activeTodos}</p>
      </div>
    </div>
  );
}

export default SimpleTodo; 